<template>
  <div class="wrapper">
    <div class="header-bar">
      <div class="title">关注</div>
    </div>
    <md-tab-bar v-model="customerType" :items="ctmTypes" @change="changeType"/>
    <dx-search-bar placeholder="搜索" component="customer" @click.native="showSearchPopup"/>
    <dx-search-customer ref="searchPopup" @on-search="search"></dx-search-customer>
    <md-scroll-view class="scroll-view"
                    ref="scrollView"
                    :scrolling-x="false"
                    @refreshing="$_onRefresh"
                    @endReached="$_onEndReached">
      <md-scroll-view-refresh slot="refresh"
                              slot-scope="{ scrollTop, isRefreshActive, isRefreshing }"
                              refreshing-text="加载中…"
                              :scroll-top="scrollTop"
                              :is-refreshing="isRefreshing"
                              :is-refresh-active="isRefreshActive"/>
      <md-scroll-view-more slot="more"
                           :is-finished="isFinished"
                           :finished-text="finishedText"/>
      <md-field class="scroll-view-item"
                v-for="(item, index) in dataList"
                :key="index">
        <div slot="header" class="header">
          <span class="index">{{index+1}}.</span>
          <span class="title">{{item.ZH_LABEL}}</span>
          <span class="follow followed iconfont icon-star-fill"
                @click="toggleAttention(item)">
          </span>
        </div>
        <template slot="footer">
          <md-button @click="openService(item)"
                     type="primary" size="small"
                     inline plain>客户服务
          </md-button>
          <md-button @click="openAlarm(item)"
                     type="primary" size="small"
                     inline plain>告警
          </md-button>
          <md-button @click="openOrder(item)"
                     type="primary" size="small"
                     inline plain>工单
          </md-button>
          <md-button @click="openBusi(item)"
                     type="primary" size="small"
                     inline plain>业务
          </md-button>
        </template>
        <md-detail-item title="客户编号" :content="item.CUSTOMER_CODE"/>
        <md-detail-item title="客户服务等级" :content="item.SERVICE_LEVEL | levelFilter"/>
        <md-detail-item title="客户级别" :content="item.CUSTOMER_GRADE | gradeFilter"/>
        <md-detail-item title="客户地市" :content="item.CITY_ID"/>
        <md-detail-item title="客户经理">
          {{item.MARKETING_MANAGER}}&nbsp;
          <a :href="'tel:'+item.MARKETING_PHONE">{{item.MARKETING_PHONE}}</a>
        </md-detail-item>
        <md-detail-item title="技术经理">
          {{item.TECH_MANAGER}}&nbsp;
          <a :href="'tel:'+item.TECH_MANAGER_PHONE">{{item.TECH_MANAGER_PHONE}}</a>
        </md-detail-item>
        <md-detail-item title="客户联系人">
          {{item.CUSTOMER_CONTACT}}&nbsp;
          <a :href="'tel:'+item.CUSTOMER_PHONE">{{item.CUSTOMER_PHONE}}</a>
        </md-detail-item>
        <md-detail-item title="客户地址" :content="item.CUSTOMER_ADD"/>
      </md-field>
    </md-scroll-view>
    <dx-footer-bar :msg="2"></dx-footer-bar>
  </div>
</template>

<script type="text/ecmascript-6">
import { mapState } from 'vuex';
import {
  // Dialog,
  Toast,
  ScrollView,
  ScrollViewRefresh,
  ScrollViewMore,
  TabBar,
  Field,
  DetailItem,
  Button
} from 'mand-mobile';
import { DxFooterBar, DxSearchBar, DxSearchCustomer } from '@/components';
import customerFilter from '@/mixins/customerFilter';
import { getCustomerList, updateAttentionCustomer } from '@/api/resource';

export default {
  components: {
    DxFooterBar,
    DxSearchBar,
    DxSearchCustomer,
    [ScrollView.name]: ScrollView,
    [ScrollViewRefresh.name]: ScrollViewRefresh,
    [ScrollViewMore.name]: ScrollViewMore,
    [TabBar.name]: TabBar,
    [Field.name]: Field,
    [DetailItem.name]: DetailItem,
    [Button.name]: Button
  },
  mixins: [customerFilter],
  data() {
    return {
      customerType: 'province',
      params: {
        page: 1,
        limit: 10,
        isAttention: '是'
      },
      dataList: [],
      // ScrollViewMore
      isFinished: false
    };
  },
  computed: {
    ...mapState({
      // tabBar
      ctmTypes: state => state.library.ctmTypes
    }),
    finishedText() {
      return this.dataList.length ? '已全部加载' : '没有数据';
    }
  },
  created() {
    this.changeType(this.ctmTypes[0]);
  },
  methods: {
    showSearchPopup() {
      this.$refs.searchPopup.showPopup();
    },
    search(form) {
      this.params = Object.assign(this.params, form);
      this.isFinished = false;
      this.params.page = 1;
      this.$refs.scrollView.triggerRefresh();
    },
    $_onRefresh() {
      this.isFinished = false;
      this.params.page = 1;
      this.loadData('refresh');
    },
    $_onEndReached() {
      if (this.isFinished) return;
      this.params.page += 1;
      this.loadData();
    },
    $_onFinished(data, type, isFinished) {
      this.isFinished = isFinished;
      if (type === 'refresh') {
        this.dataList = data;
        this.$refs.scrollView.finishRefresh();
      } else {
        this.dataList = this.dataList.concat(data);
        this.$refs.scrollView.finishLoadMore();
      }
    },
    loadData(type) {
      getCustomerList(this.params).then(result => {
        const { count, datas } = result.data;
        const { page, limit } = this.params;
        const data = datas instanceof Array && datas.length ? datas : [];
        this.$_onFinished(data, type, page * limit >= count);
      }).catch(() => {
        this.$_onFinished([], type, true);
      });
    },
    changeType(item) {
      if (!this.customerType) {
        this.customerType = item.name;
      }
      this.params.type = item.name;
      this.$nextTick(() => {
        this.$refs.scrollView.triggerRefresh();
      });
    },
    toggleAttention(item) {
      updateAttentionCustomer({ update_type: 'delete', id: item.ID }).then(result => {
        if (result.success) {
          Toast.succeed('已取消关注');
          this.$refs.scrollView.triggerRefresh();
        } else {
          Toast.succeed('失败!');
        }
      }).catch(() => {
        Toast.succeed('失败!');
      });
    },
    openService(data) {
      this.$router.push({
        name: 'service',
        query: {
          customerName: data.ZH_LABEL,
          customerCode: data.CUSTOMER_CODE
        }
      });
    },
    openAlarm(item) {
      this.$router.push({
        name: 'alarm',
        query: {
          customerCode: item.CUSTOMER_CODE
        }
      });
    },
    openOrder() {
      this.$router.push({
        name: 'statisticsOrder'
      });
    },
    openBusi(item) {
      this.$router.push({
        name: 'statisticsBusiness',
        query: {
          customerCode: item.CUSTOMER_CODE
        }
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
  .wrapper
    display : flex
    flex-direction : column
    height : 100%

  .header-bar
    height : 88px
    line-height : 88px
    text-align : center
    font-size : 36px
    background : theme-color
    color : #fff

  .scroll-view
    flex : 1

  .popup-right
    height : 100%
    background : #fff

  .scroll-view-item
    margin-bottom : 20px
    padding : 20px
    &:last-of-type
      margin-bottom : 0

  .header
    color : theme-color
    font-size : 32px
    font-weight : bold
    .index
      margin-right : 20px
      color : #333
    .follow
      margin-left : 20px
      vertical-align : top
      display : inline-block
      width : 34px
      height : 34px
      font-size : 34px
      color : #ccc
      &.followed
        color : #ffa500

  .md-button
    float : right
    margin-left : 8px
    padding : 0 8px
    height : 48px
    font-size : 24px

</style>
